<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/backend' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      <el-breadcrumb-item>未读评论</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            placeholder="输入内容查找相似的评论或用户"
            class="input-with-select"
            v-model="commentarys.query"
            clearable
            @change="getCommentaryList(isCheck)"
          >
            <el-button slot="append" icon="el-icon-search" @click="getCommentaryList(isCheck)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="text" v-if="commentaryList.length>0" @click="allRead">全部已读</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text"  @click="readMes">已读留言</el-button>
        </el-col>
      </el-row>
      <el-table stripe border :data="commentaryList" height="300" >
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="topic_id" label="主题id"></el-table-column>
        <el-table-column prop="topic_type" label="主题类型"></el-table-column>
        <el-table-column prop="content" label="评论内容"></el-table-column>
        <el-table-column prop="praiseCount" label="点赞数"></el-table-column>
        <el-table-column prop="time" label="发表时间"></el-table-column>
        <el-table-column prop="account" label="发表用户账号"></el-table-column>
        <el-table-column prop label="操作" width="180">
          <template slot-scope="scope">
            <div>
              <!-- {{scope.row}} -->
              <!--修改-->
              <el-button type="danger" icon="el-icon-edit" circle @click="editOpen(scope.row)"></el-button>
              <!-- 弹出框，修改-->
              <el-dialog title="修改留言" :visible.sync="deitFormVisible" :modal-append-to-body='false'>
                <el-form :model="editCommentarys" :rules="rules" ref="editCommentarys" label-width="100px" class="Posts-form">
                  <el-form-item label="主题类型" prop="topic_type">
                    <el-select v-model="editCommentarys.topic_type" placeholder="请选择主题类别" disabled>
                      <el-option v-for="(eztItem,eztIndex) in zhutiList" :key="'ezin'+eztIndex" :label="eztItem.topic_type" :value="eztItem.topic_type"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="类型详情" prop="topic_id">
                    <el-select v-model="editCommentarys.topic_id" placeholder="请选择类别详情" disabled>
                      <el-option v-for="(ezDItem,ezDIndex) in zhutiDetail" :key="'info-'+ezDIndex" :label="ezDItem.title" :value="ezDItem.data_id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="留言内容" prop="content">
                    <el-input v-model="editCommentarys.content"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="置顶" prop="zd_id">
                    <el-switch v-model="editCommentarys.zd_id"></el-switch>
                  </el-form-item>
                  <el-form-item label="置顶时长" prop="duration">
                    <input type="number"  min="0" max="60" style="width:90px;height:30px;">
                    <el-select v-model="value" clearable placeholder="请选择" style="width:90px">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item> -->
                  <el-form-item>
                    <el-button type="primary" @click="edit(editCommentarys)">修改</el-button>
                    <!-- <el-button @click="resetForm('editCommentarys')">重置</el-button> -->
                  </el-form-item>
                </el-form>
              </el-dialog>
              <!--回复-->
              <el-button type="info" icon="el-icon-chat-line-square" circle @click="replyOpen(scope.row)"></el-button>
              <el-dialog title="请输入要回复的信息" :visible="true" v-if="visible">
                <el-form :model="replyMes" :rules="rules">
                  <el-form-item label="留言" :label-width="formLabelWidth" prop="content">
                    <el-input v-model="replyMes.content" autocomplete="off" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="回复" :label-width="formLabelWidth" prop="reply">
                  <el-input v-model="replyMes.reply" autocomplete="off" placeholder="回复评论"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="visible = false">取 消</el-button>
                  <el-button type="primary" @click="reply(replyMes)">确 定</el-button>
                </div>
              </el-dialog>
              <!--已查看-->
              <el-button type="success" :icon="scope.row.mesIsCheck=='0'?'el-icon-view':'el-icon-check'" circle slot="reference" @click="isRead(scope.row.mes_id)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="commentarys.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="commentarys.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      commentarys: {
        query: "",
        pagenum: 1, //当前页码
        pagesize: 3 //每页显示条数
      },
      editCommentarys:{
        mes_id:"",
        topic_id:"",
        topic_type:"",
        content:"",
      },
      replyMes:{
        content:"",
        reply:"",
        from_uid:"",
      },
      commentaryList: [],
      total: 0,
      zhutiList:[],
      zhutiDetail:[],
      options: [{
          value: 'years',
          label: '年'
        },{
          value: 'months',
          label: '月'
        },{
          value: 'days',
          label: '日'
        }, {
          value: 'hours',
          label: '时'
        }, {
          value: 'minutes',
          label: '分'
        }, {
          value: 'seconds',
          label: '秒'
        }],
      value: 'days',
      typeId:[],
      rules: {
        sortName: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        content:[
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
        ],
        topic_type:[
          { required: true, message: '请选择主题类型', trigger: 'change' }
        ],
        topic_id:[
          { required: true, message: '请选择类型详情', trigger: 'change' }
        ],

      },
      dialogFormVisible: false,//添加标签
      deitFormVisible:false,//修改标签
      dialogVisible: false,//删除标签
      visible:false,
      formLabelWidth:"80px",
      isLogin:"",
      user_id:"",
      isCheck:0,
    };
  },
  created() {
    this.getCommentaryList(this.isCheck);
    this.getTopicid();
    this.isLogin = this.$store.getters.getShow;
    if(this.isLogin){
      this.user_id = this.$store.getters.getUser.user_id;
      //console.log(this.user_id);
    }
  },
  methods: {
    // 获取指定数据
    async getCommentaryList(isCheck) {
      console.log(isCheck);
      let commentarys = JSON.stringify(this.commentarys);
      const {data:res} = await this.$http.post("selUnReadMes",{isCheck,commentarys});
      console.log(res);
     if (res.status !== 200) {
        this.$message.error("获取用户列表失败1");
      } else {
        this.commentaryList = res.message;
        if(this.commentarys.query == ""){
          const {data:totalRes} = await this.$http.post("getUnReadCommentarys",{isCheck});
          console.log(totalRes.message.length);
          if(totalRes.status != 200){
            this.$message.error("获取用户列表失败");
          }else{
            this.total = totalRes.message.length;
          }
        }else{
          this.total = res.message.length;
        }
      }
    },
    // 查询全部的主题类别数据
    async getTopicid(){
      const {data:res} = await this.$http.get("selMesTypeId");
      console.log(res);
      if(res.status != 200){
        this.$message.error("获取用户列表失败");
      }else{
        // const typeId = res.message;
        this.zhutiList = res.message;
      }
    },
    // 查询类别详情
    async getTypeId(topic_type){
      console.log(topic_type);
      this.editCommentarys.topic_id = ""
      if(topic_type=="详情"){
        // console.log("查询详情信息");
        const {data:res} = await this.$http.get("getDataDesc");
        console.log(res);
        if(res.status != 200){
          this.$message.error("获取用户列表失败");
        }else{
          this.zhutiDetail = res.message;
          console.log(this.zhutiDetail);
        }
      }else{
        let obj = {};
        obj.data_id = 0;
        obj.title = "默认"
        this.zhutiDetail.push(obj);
        this.editCommentarys.topic_id = 0
        console.log(this.zhutiDetail);
      }
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange(value) {
      console.log(value);
    },
    // 每页条数
    handleSizeChange: function(newSize) {
      // console.log("newSize:"+newSize);
      this.commentarys.pagesize = newSize;
      this.getCommentaryList(this.isCheck);
    },
    // 第几页
    handleCurrentChange: function(current) {
      // console.log("current:"+current);
      this.commentarys.pagenum = current;
      this.getCommentaryList(this.isCheck);
    },
    // 修改按钮
    editOpen(item) {
      console.log(item);
      // this.editCommentarys.mes_id = item.mes_id;
      // this.editCommentarys.topic_id = item.topic_id;
      // this.editCommentarys.topic_type = item.topic_type;
      // this.editCommentarys.content = item.content;
      this.editCommentarys = item;
      console.log(this.editCommentarys);
      this.getTypeId(this.editCommentarys.topic_type);
      this.deitFormVisible=true;
    },
    // 点击修改
    async edit(edit){
      this.deitFormVisible = false;
      let content = edit.content;
      let mes_id = edit.mes_id;
      const {data:res} = await this.$http.post("editMes",{content,mes_id});
      console.log(res);
      if(res.status != 200){
        this.$message.error("修改信息失败");
      }else{
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.getCommentaryList(this.isCheck);
      }

    },
    async allRead(){
      console.log("全部已读");
      const {data:res} = await this.$http.get("updateAllCheck");
      console.log(res);
       if(res.status != 200){
        this.$message.error("全部已读失败");
      }else{
        this.$message({
          message: '全部已读完成',
          type: 'success'
        });
        this.getCommentaryList(this.isCheck);
      }
    },
    async isRead(mes_id){
      console.log(mes_id);
      let variate = mes_id;
      const {data:res} = await this.$http.post("updateMesCheck",{variate});
      // console.log(res);
      if(res.status != 200){
        this.$message.error("已读失败");
      }else{
        this.$message({
          message: '阅读完成',
          type: 'success'
        });
        this.getCommentaryList(this.isCheck);
      }
    },
    // 查询已读
    readMes(){
      this.getCommentaryList(1);
    },
    // 回复按钮打开
    replyOpen(item){
      console.log(item);
      this.visible = true;
      this.replyMes.content = item.content;
      this.replyMes.to_uids = item.mes_id;
    },
    // 回复
    async reply(item){
      this.visible = false;
      console.log(item);
      let mes = {};
      mes.content = item.reply;
      mes.time = this.fileType.changeDate(new Date());
      mes.from_uid = this.user_id;
      mes.to_uids =  item.to_uids;
      let grade = "1";
      mes = JSON.stringify(mes);
      const {data:res} = await this.$http.post("insertReply",{grade,mes});
      console.log(res);
    },
    // 点赞评论
    async praiseMes(mes_id){
      let newPrase = {};
      newPrase.Mmes_id = mes_id;
      newPrase.praise_userId = this.user_id;
      newPrase.praiseme_time = this.fileType.changeDate(new Date());
      newPrase = JSON.stringify(newPrase);
      console.log(newPrase);
      const {data:res} = await this.$http.post("insertPraiseme",{newPrase});
    },
  }
}
</script>
<style scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  /* width: 150px; */
}
.box-card {
  margin: 10px 0;
}
.el-button {
  margin: 0;
}
.el-table {
  margin: 10px 0;
}
</style>
